<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="mui/css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="mui/css/app.css"/>
		<style>
			body{
				width: 100%;
				height: 100%;
			}
			.title{
				margin: 20px 15px 7px;
				color: #6d6d72;
				font-size: 15px;
			}
			#msg_ul{
				width: 100%;
				height: 100%;
				background-color: inherit;
				padding-bottom: 60px; /*让底部按钮不会遮住上面内容*/
			}
			.mui-table-view:after{
				background-color:transparent;
			}
			
			.mui-bar .mui-title{/*用户名*/
				
			}
			/**消息**/
			.mui-media-body{
				width: 80%;
			}
			img{
				border-radius: 3px;
			}
			/**左边好友消息*/
			.username{
				color: #AAAAAA;
				margin-left: 10px;
				font-size: 12px;
			}
			/**右边消息*/
			.mymsg{
				float: right;
			}
			.msg1,
			.msg2 {
				/*border: 1px solid #ddd;*/
				background-color: #fff;
				font-size: 16px;
				/*font-family: STXingkai, "Microsoft YaHei", "微软雅黑","黑体","_sans",Arial;;*/
				font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
				line-height: 18px;
				padding: 12px 10px;
				box-sizing: border-box;
				border-radius: 6px;
				margin-left: 10px;
				position: relative;
				word-break: break-all;
				white-space: normal;
			}
			.msg1 span {
				display: block;
				width: 0;
				height: 0;
				border-width: 3px 14px 8px 0px;
				border-style: solid;
				border-color: transparent #fff transparent transparent;/*#eee*/
				position: absolute;
				top: 20%;
				left: -10px;
			}
			.msg2 span {
				display: block;
				width: 0;
				height: 0;
				border-width: 3px 0 8px 14px;
				border-style: solid;
				border-color: transparent transparent transparent #9eea6a;
				position: absolute;
				top: 20%;
				left: 98%;
			}
			.msg2{
				background-color: #9eea6a;
			}
			/**输入消息模块*/
			.msg-text{
				position: fixed;
    			bottom: 0;
    			margin-bottom: -15px;
    			width: 100%;
			}
			#submit{
				float: right;
			    width: 20%;
			    height: 40px;
			}
			#content{
				width: 80%;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<ul class="mui-table-view" id="msg_ul">
				<!--<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="mui/images/shuijiao.jpg" style="margin-right:0px">
						<div class="mui-media-body" style="margin-top: -1%;">
							<span class="username">幸福</span>
							<p class='msg1'>
								静静的看这个世界，最后终于疯了。
								<span></span>
							</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="mui/images/yuantiao.jpg">
						<div class="mui-media-body mymsg" style="overflow: visible;">
							<p class='msg2'>
								静静的看这个世界，最后终于疯了，静静的看这个世界，最后终于疯了。
								<span></span>
							</p>
						</div>
					</a>
				</li>-->
				<!--<span id="msg1"></span><br />
				<span id="msg2"></span>;<span id="msg5"></span>
				<br><span id="msg3"></span>;;<span id="msg4"></span>-->
			</ul>
			<div class="msg-text">
				<input id='content' type="text" class="mui-input-clear mui-input" />
				<button id="submit" type="button" class="mui-btn mui-btn-success">发送</button>
			</div>
		</div>

	</body>
<script src="mui/js/mui.min.js"></script>
<script type="text/javascript" src="static/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="static/js/getparam.js"></script>
<script type="text/javascript" src="static/chat-winds.js"></script>
<script>
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	//$('#msg_ul').css("height", $(window).height() - 80);
	var facityHeight = 0; //固定不变
	$(function() {
		var diviceHeight = window.screen.height;
		$('#msg5').text("csh" +diviceHeight);
		
		//Android
		$(window).resize(function () {
		    var thisHeight = $(this).height(); //获取当前页面高度(不包含输入法)
		    $('#msg2').text("thisHeight="+ thisHeight);
			var maxHei = facityHeight * 0.3;
		    if (facityHeight - thisHeight > maxHei) {
		        //$('#msg3').text("A弹出");
		        $(document).scrollTop($(document).height()-(facityHeight - thisHeight));
		    } else {
		        //$('#msg3').text("A收起");
		        $(document).scrollTop($(document).height()-facityHeight);
		    }
		})
		
		///IOS
		$(document).on('focusin', function () {
		　　//软键盘弹出的事件处理
			$('#msg4').text("i-弹出");
		});
		$(document).on('focusout', function () {
		　　//软键盘收起的事件处理
			$('#msg4').text("i-收起");
		});
		
		/*$("#content").click(function() {
			setTimeout(function(){
				uptBodyHeight();
				console.log("1");
				$('#msg5').text($(document).height()); //页面总长度-会大于等于屏幕高度
				$('#msg5').append(";;"+$(window).height());
				$(document).scrollTop($(document).height()-$(window).height());
			},200)
		})*/
		$("#content").focus(function() {
			//$('#msg').text("input");
	        //$(document).scrollTop($(document).height()-$(window).height());
		})
	})
	window.onload = function() {
		uptBodyHeight();
	};
	/**移动端屏幕固定高度-设置给页面-超过出现滚动条*/
	function uptBodyHeight(){
		if(window.innerHeight) {
			facityHeight = window.innerHeight;
		} else if((document.body) && (document.body.clientHeight)) {
			facityHeight = document.body.clientHeight;
		}
		var html = document.getElementsByTagName('html')[0];
		if(document.body.offsetHeight < facityHeight) {
			html.style.height = facityHeight;
		}
		console.log("高度=" + facityHeight);
		$('#msg1').text("设备高度"+facityHeight);
	}
	
</script>
</html>